<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <my-header></my-header>
      <my-body></my-body>
      <my-footer></my-footer>
    </div>

    <script src="../Vue.js"></script>
    <script>
      // 创建组件有两种方式

      // 全局创建组件
      // 有两个参数,第一个表示的是组件的名称，第二个是选项对象

      // 组件名：顾名思义(语义化)
      // 不能h5标签名重复
      // 创建使用连字符或者大驼峰
      // 使用的时候使用连字符
      Vue.component("MyHeader", {
        // 一个组件本质上是一个拥有预定义选项的一个 Vue 实例, 除了el
        // 必须要有一个选项，是template
        template: "<header>猫眼头部 - {{ str }}</header>",
        data() {
          return {
            str: "hello",
          };
        },
      });

      Vue.component("MyButton", {
        template: "<button>按钮</button>",
      });

      Vue.component("MyBody", {
        template: "<main>猫眼内容 - <my-button></my-button></main>",
      });

      Vue.component("MyFooter", {
        template: "<footer>猫眼底部</footer>",
      });

      new Vue({
        el: "#app",
        data: {},
      });
    </script>
  </body>
</html>
